<template>
    <div class="box">
        <header class="header">
            <van-search show-action placeholder="请输入搜索关键词" @click-input="$router.push('/search')" />
        </header>
        <main class="content">
            <!-- <Swipe :images="images"></Swipe> -->
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item>
                    <van-grid>
                        <van-grid-item
                            icon="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"
                            text="京东超市" />
                        <van-grid-item
                            icon="https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png"
                            text="京东电器" />
                        <van-grid-item
                            icon="https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png"
                            text="服饰美妆" />
                        <van-grid-item
                            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
                            text="充值中心" />
                        <van-grid-item
                            icon="https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png"
                            text="plus会员" />
                        <van-grid-item
                            icon="https://m.360buyimg.com/babel/jfs/t20270715/22456/27/20943/10381/6694ee81F684396bb/0ba51f592d28dfdd.png"
                            text="京东生鲜" />
                        <van-grid-item
                            icon="https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png"
                            text="京东国际" />
                        <van-grid-item :icon="require('@/assets/logo.png')" text="文字" />
                    </van-grid>
                </van-swipe-item>
                <van-swipe-item>
                    <van-grid>
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                    </van-grid>
                </van-swipe-item>
            </van-swipe>
            <!-- 3.调用组件 -->
            <ProList></ProList> <!-- 写法： <ProList />    <pro-list><pro-list/> -->
        </main>
    </div>
</template>
<script setup>
import ProList from './components/ProList.vue'
import Swipe from './components/Swipe.vue'
import { ref } from 'vue'
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])
</script>